<script setup lang='ts'>
import { ref, onMounted, watchEffect } from 'vue'
import { useRoute, useRouter } from 'vue-router';
import { useSearchStore } from '../stores/search';

const router = useRouter()
const route = useRoute()
const input = ref('')
// 激活的导航
const active = ref('')

const search = () => {
    if (input.value != '') {
      // const res = await searchAPI(input.value)
      // list.value = res.data
      router.push({path:'/search',query:{query:input.value}})
    } else {
      alert('提示：请输入小说名称或作者名字！')
    }
}
watchEffect(() => {
  if (route.name != 'search') {
    input.value = ''
  }
})
</script>

<template>
  <div>
    <!-- 标题 输入框  -->
    <div class="flex items-center justify-between header">
      <div class="logo min-w-20 ">
        <RouterLink to="/">
          笔趣阁
        </RouterLink>
       
      </div>
      <div class="w-2/3 pr-40">
        <div class="relative rounded-md shadow-sm ">
          <input
            v-model="input"
            type="text"
            name="price"
            id="price"
            class="block w-full rounded-md border-0 py-1.5 pl-5 pr-20 text-gray-700 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-1 focus:ring-inset focus:ring-indigo-300 sm:text-sm sm:leading-6"
            placeholder="快速搜索、找书、找作者"
          >
          <div class="absolute inset-y-0 right-0 flex items-center my-1">
            <button
              type="button"
              class="inline-flex items-center px-3 py-2 text-sm font-semibold text-gray-500 bg-white border-l-0 rounded-md shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
              @click="search"
            >
              搜索
            </button>
          </div>
        </div>
      </div>
      <div
        class="flex items-center justify-end w-auto text-gray-500 border-b border-collapse cursor-pointer min-w-max hover:text-blue-900 hover:border-blue-600"
      >
        <RouterLink to="/bookcase">
          阅读记录
        </RouterLink>
      </div>
    </div>
    <!-- 导航栏  -->
    <div class="items-center w-full h-12 mt-5 nav-color">
      <ul class="flex items-center justify-around h-full text-lg text-white">
        <li
          @click="active = '/'"
          :class="{ 'border-b': active === '/' }"
          class="hover:border-b"
        >
          <RouterLink to="/">
            首页
          </RouterLink>
        </li>
        <li
          @click="active = '/玄幻奇幻'"
          :class="{ 'border-b': active === '/玄幻奇幻' }"
          class="hover:border-b"
        >
          <RouterLink to="/玄幻奇幻">
            玄幻
          </RouterLink>
        </li>
        <li
          @click="active = '/武侠仙侠'"
          :class="{ 'border-b': active === '/武侠仙侠' }"
          class="hover:border-b"
        >
          <RouterLink to="/武侠仙侠">
            武侠
          </RouterLink>
        </li>
        <li
          @click="active = '/都市言情'"
          :class="{ 'border-b': active === '/都市言情' }"
          class="hover:border-b"
        >
          <RouterLink to="/都市言情">
            都市
          </RouterLink>
        </li>
        <li
          @click="active = '/历史军事'"
          :class="{ 'border-b': active === '/历史军事' }"
          class="hover:border-b"
        >
          <RouterLink to="/历史军事">
            历史
          </RouterLink>
        </li>
        <li
          @click="active = '/网游竞技'"
          :class="{ 'border-b': active === '/网游竞技' }"
          class="hover:border-b"
        >
          <RouterLink to="/网游竞技">
            网游
          </RouterLink>
        </li>
        <li
          @click="active = '/科幻灵异'"
          :class="{ 'border-b': active === '/科幻灵异' }"
          class="hover:border-b"
        >
          <RouterLink to="/科幻灵异">
            科幻
          </RouterLink>
        </li>
        <li
          @click="active = '/女生频道'"
          :class="{ 'border-b': active === '/女生频道' }"
          class="hover:border-b"
        >
          <RouterLink to="/女生频道">
            女生
          </RouterLink>
        </li>
        <li
          @click="active = '/完本'"
          :class="{ 'border-b': active === '/完本' }"
          class="hover:border-b"
        >
          <RouterLink to="/完本">
            完本
          </RouterLink>
        </li>
        <li
          @click="active = '/top'"
          :class="{ 'border-b': active === '/top' }"
          class="hover:border-b"
        >
          <RouterLink to="/top">
            排行榜
          </RouterLink>
        </li>
      </ul>
    </div>
  </div>
</template>

<style scoped lang='scss'></style>